<template>
  <div class="viewDetail">
    <div class="header-top">
      <div class="head-title" @click="gotoPage()">
        <i class="el-icon-back"></i>新建方案
      </div>
    </div>
    <template>
      <div class="viewDetail-big">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="120px"
          label-position="left"
        >
          <div class="content-item">
            <el-form-item label="方案名称">
              <el-input v-model="form.userName2" placeholder="请输入方案名称" maxlength="20" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="生效企微号：" prop="userName2">
              <el-button type="primary" plain>选择企微号</el-button>
              <div class="user-images">
                <span>已选</span>
                <div class="img-li">
                  <img src="../../../assets/images/profile.jpg"/>
                  <img src="../../../assets/images/profile.jpg"/>
                  <img src="../../../assets/images/profile.jpg"/>
                  <img src="../../../assets/images/profile.jpg"/>
                  <img src="../../../assets/images/profile.jpg"/>
                </div>
                <div><i class="el-icon-more"></i></div>
                <div class="number">等5个</div>
              </div>
            </el-form-item>
            <el-form-item label="触发智能标签" prop="selectType">
              <div class="item-big">
                <el-select v-model="form.selectType" placeholder="所有标签" size="small" class="select-left">
                  <el-option
                    v-for="item in selectTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
                <el-form-item  prop="selectType" label-width="0px" class="select-right">
                  <MultipleSelect size="small" placeholder='企微标签' :receiverNameOpt='lableOpt'/>
                </el-form-item>
              </div>
            </el-form-item>
            <el-form-item label="排除智能标签" prop="selectType">
              <div class="switch-tips">
                <el-switch
                  v-model="form.name"
                  active-color="#13ce66">
                </el-switch>
                开启后将排除以下满足条件的客户
              </div>
              <div class="item-big">
                <el-select v-model="form.selectType" placeholder="所有标签" size="small" class="select-left">
                  <el-option
                    v-for="item in selectTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
                <el-form-item  prop="selectType" label-width="0px" class="select-right">
                  <MultipleSelect size="small" placeholder='企微标签' :receiverNameOpt='lableOpt'/>
                </el-form-item>
              </div>
            </el-form-item>
            <el-form-item label="发送内容：">
              <div class="contentBig">
                <div class="item-li">
                  <div class="time">
                    <el-input type="number" v-model="form.name" size="mini" class="select-left"></el-input>
                    <el-select
                      v-model="queryParams.userName6"
                      @change="handleQuery"
                      placeholder="时间"
                      size="mini"
                      class="select-right"
                    >
                      <el-option
                        v-for="item in timeList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                    <div>10分钟后发送</div>
                  </div>
                  <div class="content-li">
                    <div class="index">1</div>
                    <div class="text">几句话感觉金</div>
                  </div>
                </div>
                <div class="item-li">
                  <div class="time">
                    <el-input type="number" v-model="form.name" size="mini" class="select-left"></el-input>
                    <el-select
                      v-model="queryParams.userName6"
                      @change="handleQuery"
                      placeholder="时间"
                      size="mini"
                      class="select-right"
                    >
                      <el-option
                        v-for="item in timeList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                    <div>10分钟后发送</div>

                  </div>
                </div>
                <div class="item-li">
                  <div class="time">
                    <el-input type="number" v-model="form.name" size="mini" class="select-left"></el-input>
                    <el-select
                      v-model="queryParams.userName6"
                      @change="handleQuery"
                      placeholder="时间"
                      size="mini"
                      class="select-right"
                    >
                      <el-option
                        v-for="item in timeList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                    <div>10分钟后发送</div>

                  </div>
                  <!--              图片-->
                  <div class="content-li">
                    <div class="index">1</div>
                    <div class="images">
                      <img src="../../../assets/images/profile.jpg"/></div>
                  </div>

                </div>
                <div class="item-li">
                  <div class="time">
                    <el-input type="number" v-model="form.name" size="mini" class="select-left"></el-input>
                    <el-select
                      v-model="queryParams.userName6"
                      @change="handleQuery"
                      placeholder="时间"
                      size="mini"
                      class="select-right"
                    >
                      <el-option
                        v-for="item in timeList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                    <div>10分钟后发送</div>

                  </div>
                  <!--              视频-->
                  <div class="content-li">
                    <div class="index">1</div>
                    <div class="images">
                      <img src="../../../assets/images/profile.jpg"/></div>

                  </div>
                </div>
                <!--                文件-->
                <div class="item-li">
                  <div class="time">
                    <el-input type="number" v-model="form.name" size="mini" class="select-left"></el-input>
                    <el-select
                      v-model="queryParams.userName6"
                      @change="handleQuery"
                      placeholder="时间"
                      size="mini"
                      class="select-right"
                    >
                      <el-option
                        v-for="item in timeList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                    <div>10分钟后发送</div>

                  </div>
                  <div class="content-li">
                    <div class="index">1</div>
                    <div class="file">
                      <img src="../../../assets/images/profile.jpg" class="fileImg"/>
                      <div class="file-right">
                        <div class="file-name">OA+商城.docx</div>
                        <div class="file-size">132.43 kB</div>
                      </div>
                    </div>
                  </div>
                </div>
                <!--                文件-->
                <div class="item-li">
                  <div class="time">
                    <el-input type="number" v-model="form.name" size="mini" class="select-left"></el-input>
                    <el-select
                      v-model="queryParams.userName6"
                      @change="handleQuery"
                      placeholder="时间"
                      size="mini"
                      class="select-right"
                    >
                      <el-option
                        v-for="item in timeList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                    <div>10分钟后发送</div>

                  </div>
                  <div class="content-li">
                    <div class="index">1</div>
                    <div class="links">
                      <div class="file-right">
                        <div class="links-name">百度</div>
                        <div class="links-content">百度是一家互联网公司</div>
                      </div>
                      <img src="../../../assets/images/profile.jpg" class="fileImg"/>
                    </div>
                  </div>
                </div>
              </div>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="footer-btn">
        <el-button @click="handleCloseDialog">保存配置</el-button>
        <el-button type="primary" @click="onSubmit('form')">删除方案</el-button>
      </div>
    </template>
  </div>
</template>

<script>
//import {listUser, delUser,} from "@/api/system/user";

import {listUser} from "@/api/system/user";
import MultipleSelect from "@/views/components/multipleSelect.vue";

export default {
  name: "addOrEditUserOperations",
  components: {
    MultipleSelect,
     'ViewtriggerObject': () => import('./ViewtriggerObject.vue'),//导出弹窗
  },
  data() {
    return {

      active: 0,//当前选中
      tableHeight: 600,
      showViewConditions: false,
      showSelectProgrammeType:false,//修改方案
      showTableLabel:false,
      tablist: [
        {
          value: 1,
          label: '方案规则',
        },
        {
          value: 2,
          label: '已触发对象',
        },
      ],
      form: {
      name:'',
      },
      rules: {
        'name': [
          {required: true, message: '请输入标签名称', trigger: 'blur'}
        ],

      },
      selectTypeList: [
        {value: 0, label: '所有标签',},
        {value: 1, label: '任意标签',}
      ],
      lableOpt: [
        {
          value: 1, label: '客户等级', children: [
            {value: 3, label: '核心',},
            {value: 4, label: '重要',},
            {value: 5, label: '一般',}
          ]
        },
        {
          value: 2, label: '客户等级2', children: [
            {value: 6, label: '可爱',},
            {value: 7, label: '知性',},
            {value: 8, label: '性感',}
          ]
        }
      ],
      queryParams:{},
      groupList: [
        //群查找
        {value: 1, label: "智行"},
        {value: 2, label: "锐行"},
      ],
      timeList: [
        {
          value: 1,
          label: '秒',
        },
        {
          value: 2,
          label: '分钟',
        },
        {
          value: 3,
          label: '小时',
        },
      ],
      sexTypeList:[
        {
          value: 1,
          label: '限制',
        },
        {
          value: 2,
          label: '不限',
        },
      ],
      sexList:[
        {
          value: 1,
          label: '男',
        },
        {
          value: 2,
          label: '女',
        },
        {
          value: 3,
          label: '未知',
        },
      ],
    };
  },
  created() {
  },
  methods: {
    getActive(index) {
      this.active = index;
    },
    handleCloseDialog() {
      this.$emit('update:visableIf', false);
      this.$emit('handleQuery');
    },
    getSelectProgrammeType(){
      this.showSelectProgrammeType=true;
    },
    getConditions() {
      this.showViewConditions = true;
    },
    openTableLabel(){
      this.showTableLabel=true;
    },
      getGroupInvitationMgt(){
        this.$router.push({path:'/customerOperationsMgt/newUserOperationsMgt/GroupInvitationMgt'})
      },
    gotoPage(){
      this.$router.push({path:'/IntelligentOperationMgt/inoperationMgt/smartTagsMgtList'})
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    onSubmit(formName) {
      //提交的代码
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('提交表单');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  }
};
</script>
<style lang="scss" scoped>
.item-big {
  display: flex;
  align-items: center;
  .select-left{
    width: 120px;
    margin-right: 10px;
  }
  .select-right{
    flex: 1;
  }
}
.viewDetail {
  height: 100%;
  position: relative;

  .viewDetail-title {
    height: 50px;
    line-height: 50px;
    padding-left: 16px;
    background: #fff;
    border-bottom: 1px solid #e9e9e9;
    font-size: 14px;
    font-weight: 600;
    color: rgba(0, 0, 0, .85);
  }


  .viewDetail-footer {
    position: absolute;
    left: 0px;
    bottom: 0px;
    right: 0px;
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #eee;
  }

  .tips {
    background: #fed;
    border-radius: 2px;
    border: 1px solid #ffdbb6;
    position: relative;
    display: flex;
    align-items: center;
    padding: 8px 15px;
    word-wrap: break-word;
    font-size: 14px;
    margin: 20px;
  }
}

.content-item {
  padding: 0px 20px;
  padding-top: 10px;
}

.msg {
  font-size: 12px;
  color: #888;
}

.labelMsg {
  margin-top: 8px;
  background: #ebf2ff;
  border-radius: 2px;
  border: none;
  margin: 0;
  color: rgba(0, 0, 0, .65);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5715;
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px 15px;
  word-wrap: break-word;
  max-width: 700px;
  margin-top: 10px;
}

.time {
  height: 40px;
  display: inline-flex;
  line-height: 24px;
  padding: 8px 10px;
  background: #f5f5f5;
  border: 1px solid #e9e9e9;
  border-bottom: 0;
  font-size: 14px;
  color: #666;

  .select-left {
    width: 70px;
    margin-right: 5px;
  }

  .select-right {
    width: 80px;
    margin-right: 10px;
  }

  .qun-btn {
    margin-left: 10px;
    height: 28px;
    display: flex;
    padding: 0px;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    padding: 0px 10px;
    background-color: rgb(250, 173, 20);
    color: #fff;
    border: none;
  }
}

.content-li {
  position: relative;
  padding: 10px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  min-height: 60px;
  border: 1px solid #eee;

  .index {
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    background: #ddd;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    margin-right: 10px;
  }

  .text {
    width: fit-content;
    padding: 0px 12px;
    height: 36px;
    font-size: 15px;
    color: #000;
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 5px;
  }

  .qun {
    display: flex;
    align-items: center;

    .open-Btn {
      color: rgba(0, 0, 0, .65);
      font-size: 14px;
      font-variant: tabular-nums;
      line-height: 1.5715;
      list-style: none;
      font-feature-settings: "tnum", "tnum";
      position: relative;
      display: flex;
      align-items: center;
      padding: 8px 15px;
      word-wrap: break-word;
      border-radius: 4px;
      background-color: #fffbe6;
      border: 1px solid #ffe58f;
    }

    .mgt-btn {
      line-height: 1.5715;
      font-weight: 400;
      white-space: nowrap;
      text-align: center;
      box-shadow: unset;
      cursor: pointer;
      transition: all .3s cubic-bezier(.645, .045, .355, 1);
      user-select: none;
      touch-action: manipulation;
      height: 32px;
      padding: 4px 15px;
      font-size: 14px;
      border-radius: 4px;
      color: rgba(0, 0, 0, .65);
      border: 1px solid #e9e9e9;
      background: #fff;
      margin-left: 10px;
    }
  }

  .images {
    display: block;
    max-width: 160px;
    max-height: 160px;
    cursor: pointer;
    border-radius: 5px;

    img {
      width: auto;
      height: auto;
      max-height: 100%;
      max-width: 100%;
      object-fit: cover;
    }
  }

  .file {
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 5px;
    cursor: pointer;
    max-width: 240px;
    padding: 12px;
    height: 76px;
    display: flex;
    align-items: center;

    img {
      width: 40px;
      height: 50px;

    }

    .file-right {
      margin-left: 10px;
      line-height: 20px;

      .file-size {
        margin: 5px 0 0;
        font-size: 12px;
        color: #a1a7b7;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }

  .links {
    display: flex;
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 5px;
    cursor: pointer;
    padding: 12px;
    margin-right: 10px;

    .file-right {
      margin-right: 60px;
      line-height: 40px;

    }

    .links-content {
      color: #888;
    }

    img {
      width: 80px;
      height: 80px;
      object-fit: cover;
    }

  }
}

.contentBig {
  border: 1px solid #eee;
  padding: 20px;

  .item-li {
    margin-bottom: 10px;
    position: relative;
  }
}

.viewDetail {
  overflow-y: auto;
}

.viewDetail-big {
  height: calc(100vh - 150px);
  overflow-y: auto;
  background: #fff;
  width: 1000px;
  margin: auto;
}

.operation-big {
  display: flex;
  position: absolute;
  top: 70px;
  right: 30px;

  img {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    cursor: pointer;
  }


}
.label-list {
  label {
    font-size: 14px;
    line-height: 1.5715;
    word-wrap: break-word;
    font-weight: 400;
  }

  span {
    margin: 4px 4px 4px 0;
    font-size: 12px;
    height: 25px;
    line-height: 25px;
    white-space: nowrap;
    background: #fafafa;
    border: 1px solid #e9e9e9;
    border-radius: 4px;
    padding: 0px 7px;
    display: inline-block;

  }
}
.flex-item {
    display: flex;
    flex-wrap: wrap;
}
.user-images {
  height: 50px;
  display: flex;
  align-items: center;
  border: 1px solid #eee;
  padding: 0px 10px;
  color: #888;
  margin-top: 10px;

  .number {
    margin-left: 10px;
  }

  .img-li {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px 5px;
    overflow: hidden;
    border-radius: 2px;

    img {
      width: 24px;
      height: 24px;
      object-fit: cover;
      margin: 0px 2px;
    }
  }
}
.condition-big {
  border: 1px solid #eee;
  padding: 20px;
}
.switch-tips {
  margin-bottom: 10px;
  background-color: rgb(245, 245, 245);
  color: rgb(255, 105, 0);
  padding: 8px 4px;
  vertical-align: middle;
  padding: 0px 10px;
}
.footer-btn {
  display: flex;
  background: #fff;
  border-top: 1px solid #e9e9e9;
  padding: 10px 0px;
  justify-content: center;
}
.table-list {
  font-size: 14px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  background: #fff;
  padding: 0px 20px;
  border-bottom: 1px solid #eee;

  li {
    cursor: pointer;
    font-weight: 400;
    list-style: none;
    margin: 0px 10px;
    position: relative;
    display: flex;
    height: 44px;
    align-items: center;

    &.active {
      color: #3070ff;

      &:after {
        content: '';
        position: absolute;
        height: 2px;
        background: #3070ff;
        width: 100%;
        bottom: 0px;
        left: 0px;
      }
    }
  }

  .example-modal {
    position: fixed;
    left: 0;
    margin-top: 10px;
    display: none;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    background: #FFFFFF;

    .example-cover {
      height: 600px;
    }
  }
}
.header-top {
  height: 46px;
  background: #fff;
  border-bottom: 1px solid #e9e9e9;
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 20px;

  .head-title {
    font-size: 14px;
    line-height: 22px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    font-weight: bold;

    i {
      font-size: 20px;
      font-weight: bold;
      cursor: pointer;
      margin-right: 10px;
    }
  }

}
</style>
